<template>
  <el-container class="main_con" style="padding-bottom: 0px">
    <div class="setting">
      <div class="setting_body">
        <el-form size="medium" label-width="160px" ref="itemForm" :model="obj.configuration" :rules="itemRules">
          <div class="setting_body_item">
            <div class="conetnt edit_con">
              <div class="edit_content">
                <el-form-item label="商品详情中团列表" prop="">
                  <el-radio-group v-model="obj.configuration.is_open">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="未付款订单" prop="">
                  <el-radio-group v-model="is_close">
                    <el-radio :label="0">永不关闭</el-radio>
                    <el-radio :label="1">自定义关闭时间</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item v-if="is_close == 1" label="" prop="close_time">
                  <div class="fks">
                    订单拍下
                    <el-input v-model.number="obj.configuration.close_time" style="width:180px;margin-right:10px;margin-left:10px">
                      <template slot="append">
                        分钟
                      </template>
                    </el-input>
                    内未付款，自动关闭订单
                    <div style="color:#909399;font-size:12px;">订单取消时间必须在20-1440分钟之间</div>
                  </div>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div class="setting_bootom"><el-button v-has size="medium" type="primary" @click="saveData">保存数据</el-button></div>
    </div>
  </el-container>
</template>

<script>
import {addSiteConfig, editSiteConfig, getSiteConfig} from '@/api/mall/setting';
export default {
  data() {
    return {
      isLoading: false,
      is_close: 0,
      rk: 1,
      obj: {
        type: 'group',
        status: 1,
        configuration: {
          is_open: 0,
          close_time: 0
        }
      },

      itemRules: {
        close_time: [
          {
            required: true,
            message: '订单取消时间必须在20-1440分钟之间'
          },
          {type: 'number', min: 20,max: 1440, message: '订单取消时间必须在20-1440分钟之间', trigger: 'blur'}

        ],
        logo: [
          {
            required: true,
            message: '商城logo必须上传'
          }
        ]
      }
    };
  },

  mounted() {
    this.getConfig('group');
  },
  methods: {
    //获取站点配置数据
    getConfig(type) {
      this.isLoading = true;
      getSiteConfig(type)
        .then(res => {
          this.isLoading = false;
          if (res.msg) {
            this.obj = res.msg;
            if (this.obj.configuration.close_time) {
              this.is_close = 1;
            } else {
              this.is_close = 0;
            }
          }
        })
        .catch(e => {
          this.isLoading = false;
        });
    },

    //保存数据
    saveData() {
      this.$refs.itemForm.validate(valid => {
        if (valid) {
          this.isLoading = true;
          if (this.is_close == 0) {
            this.obj.configuration.close_time = 0;
          } else {
            if (this.obj.configuration.close_time < 5) {
              this.obj.configuration.close_time = 5;
            } else if (this.obj.configuration.close_time > 1440) {
              this.obj.configuration.close_time = 1440;
            }
          }

          if (this.obj.update_time) {
            //更新
            editSiteConfig(this.obj)
              .then(res => {
                this.isLoading = false;
                this.getConfig('group');
              })
              .catch(e => {
                this.isLoading = false;
              });
          } else {
            //新增
            addSiteConfig(this.obj)
              .then(res => {
                this.isLoading = false;
                this.getConfig('group');
              })
              .catch(e => {
                this.isLoading = false;
              });
          }
        } else {
          //校验没通过
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
//覆盖样式
.main_con .edit_con .edit_content {
  border-bottom: 0;
}

.fks {
  background: #f4f6f8;
  //width: 500px;
  padding: 20px;
  color: #606266;
}
.setting {
  background: #fff;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 110px);

  .setting_body {
    flex-grow: 1;
    overflow-y: auto;
    //padding-top: 20px;

    .setting_body_item {
      .header {
        background: #e0e3e8;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        margin-top: 20px;
      }
    }
  }

  .setting_bootom {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #dcdfe6;
  }
}
/* //选择图标 */
.icon_box {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  position: relative;

  .icon-abl-close {
    position: absolute;
    top: -6px;
    right: -9px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
  }
  .noIcon {
    width: 60px;
    height: 60px;
    display: inline-block;
  }
  .iconfont {
    font-size: 30px;
  }
  &:hover {
    .choose_bar {
      display: block;
    }
  }

  .choose_bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    line-height: 18px;
    text-align: center;
    width: 100%;

    i.txt {
      display: inline-block;
      font-style: normal;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      letter-spacing: 2px;
    }
  }
}
.configuration {
  .el-input {
    width: 120px;
    margin: 0px 5px;
  }
}
</style>
